<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        ul {
            overflow: hidden;
            background-color: #80808030;
            height: 0px;
            transition: all 0.5s;
        }

        ul.active {
            height: 200px;
        }

        ul li {
            list-style: none;
            float: left;
            width: 33.33%;
        }

        img {
            width: 320px;
            height: 200px;
            display: block;
            margin: auto;
            cursor: pointer;
        }


    </style>
</head>
<body>
    <ul>
        <li>
            <img src="../images/1.jpg">
        </li>
        <li>
            <img src="../images/2.jpg">
        </li>
        <li>
            <img src="../images/3.jpg">
        </li>
    </ul>
    <button>换肤</button>
</body>
<script>
    let body = document.querySelector('body');
    let btn = document.querySelector('button');
    let ul = document.querySelector('ul');

    btn.onclick = () => ul.classList.toggle('active');

    ul.onclick = e => {
        e = e || window.event;
        let target = e.target || e.srcElement;
        if (target.nodeName == 'IMG') body.style.background = `url(${target.src}) no-repeat center`;
        ul.classList.toggle('active');
    }
</script>
</html>